<%@page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">



    <title>学生信息管理系统</title>
    <link href="../../static/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../static/css/dashboard.css">
    <script src="../../static/js/vue.js"></script>
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>

<body>
<div id="app">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">学生信息管理系统</a>
            </div>
            <%
                HttpSession s = request.getSession();
            %>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><h4 style="color: white">你好，<%=s.getAttribute("username")%>!</h4></li>
                    <li><a href="#"><span class="glyphicon glyphicon-warning-sign"></span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
                    <li><a href="#"><img style="height: 30px;width: 30px" @click="changehref()" src="<%=s.getAttribute("img")%>" alt="..." class="img-circle"></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-folder-open"></span></a></li>
                </ul>

            </div>
        </div>
    </nav>
    <div class="container-fluid col-lg-10">
        <div class="row">
            <div class="col-sm-15 col-md-10 col-lg-10 sidebar">
                <ul class="nav nav-sidebar">
                    <li v-bind:class="{active:shows==1}" @click="show1()"><a href="/demo/SysM/admin"><span class="glyphicon glyphicon-home"></span>用户账户管理</a></li>
                    <li v-bind:class="{active:shows==2}" @click="show2()"><a href="/demo/stuInfo/index"><span class="glyphicon glyphicon-bookmark"></span>学生档案资料</a></li>
                    <li v-bind:class="{active:shows==3}" @click="show3()"><a href="/demo/Clazz/gotoget"><span class="glyphicon glyphicon-list-alt"></span>班级信息</a></li>
                    <li v-bind:class="{active:shows==4}" @click="show4()"><a href="/demo/course/index"><span class="glyphicon glyphicon-list"></span>课程信息</a></li>
                    <li v-bind:class="{active:shows==5}" @click="show5()"><a href="/demo/design/index"><span class="glyphicon glyphicon-tasks"></span>班级课程管理</a></li>
                    <li v-bind:class="{active:shows==6}" @click="show6()"><a href="/demo/Pay/gotoget"><span class="glyphicon glyphicon-usd"></span>学生缴费</a></li>
                    <li v-bind:class="{active:shows==7}" @click="show7()"><a href="/demo/score/index4"><span class="glyphicon glyphicon-blackboard"></span>学生成绩</a></li>
                    <li v-bind:class="{active:shows==8}" @click="show8()"><a href="/demo/SysM/logout"><span class="glyphicon glyphicon-off"></span>退出系统</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-lg-50" style="margin-top: 10px" v-cloak>

        <div class="container">
            <div class="row">
                <div class="col-xs-60 col-sm-60 col-md-60 col-lg-60 btn-group" role="group" aria-label="..."
                     style="background: darkgray;height: 30px;padding-top: 5px">
                    <span class="glyphicon glyphicon-send" aria-hidden="true"><strong> 课程信息管理</strong></span>
                </div>
                <div class="col-xs-20 col-sm-20 col-md-20 col-lg-20">
                    <div class="col-xs-15 col-sm-15 col-md-15 col-lg-15"
                         style="padding-right: 0px;padding-top: 3px">
                        <h5>用户编号:</h5>
                    </div>
                    <div class="col-xs-45 col-sm-45 col-md-45 col-lg-45" style="margin-top: 5px">
                        <input class="form-control" v-model="name" type="text" placeholder="请输入课程名" />
                    </div>
                </div>
                <div class="col-xs-20 col-sm-20 col-md-20 col-lg-20">
                    <div class="col-xs-30 col-sm-30 col-md-30 col-lg-30" style="padding: 1px;margin-top: 5px">
                        <button class="form-control" @click="getCourseM()"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            搜索
                        </button>
                    </div>
                </div>
                <div style="margin-top: 5px" class="col-xs-20 col-sm-20 col-md-20 col-lg-20 btn-group" role="group"
                     aria-label="...">
                    <form action="/demo/course/toadd">
                        <button type="submit"
                                class="col-xs-15 col-sm-15 col-md-15 col-lg-15  btn btn-default button">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            新增
                        </button>

                        <button type="button" data-toggle="modal" data-target="#myModal2"
                                class="col-xs-15 col-sm-15 col-md-15 col-lg-15 btn btn-default">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                            删除
                        </button>


                    </form>
                </div>

                <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    删除信息
                                </h4>
                            </div>
                            <div class="modal-body">
                                是否删除选中信息？
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                    取消
                                </button>
                                <button type="button" v-on:click="deletechoose()" data-dismiss="modal" class="btn btn-primary">
                                    删除
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>

            </div>
        </div>

        <div class="container" style="margin-top: 20px">

            <table class="table table-striped table-bordered table-hover">
                <thead>
                <td><input v-model="showall" @click="selectall()" type="checkbox">全选</td>
                <td>课程名</td>
                <td>教材</td>


                </thead>
                <tr v-show="!courseMList[i].del" v-for="(cM,i) in courseMList">
                    <td><input @click="listen(i)" v-model="courseMList[i].show" type="checkbox"></td>
                    <td @click="selectanywhere(i)">{{cM.name}}</td>
                    <td @click="selectanywhere(i)">{{cM.book}}</td>
                </tr>
            </table>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-xs-20 col-sm-20 col-md-20 col-lg-20" style="padding-top: 20px">
                    <div class="col-xs-15 col-sm-15 col-md-15 col-lg-15"
                         style="padding-right: 0px;padding-top: 6px">
                        共{{currentPage}}页,每页
                    </div>
                    <div class="col-xs-20 col-sm-20 col-md-20 col-lg-20"
                         style="padding-left: 0px;padding-right: 2px">
                        <select v-model="size" class="form-control" value="请选择">
                            <option value="2">2</option>
                            <option selected value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                    <div class="col-xs-15 col-sm-15 col-md-15 col-lg-15" style="padding-left: 0px;padding-top: 6px">
                        行
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-60 column">
                    <ul class="pagination">
                        <li @click="previous()">
                            <span>Prev</span>
                            <%--<a href="#">Prev</a>--%>
                        </li>
                        <li v-for="i in currentPage" :key="i"
                            @mouseenter="mouseEnter(i)" @mouseleave="mouseLeave"
                            @click="array(i)"  :class="{active:i==isActive,inactive:i!==isActive}" >
                            <a href="#">
                                {{i}}
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li @click="nextPage()">
                            <span>Next</span>
                            <%--<a href="#">Next</a>--%>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


    </div>

</div>
<script src="/static/js/jquery-3.4.0.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var checkDel = -1;
    var app = new Vue({
        el: '#app',
        data: {
            shows:4,
            showall: false,
            num:null,
            name: '',
            courseMList: [],
            courseM:{
                name:'',
                book:''
            },

            size:5,
            currentPage:5,
            nowPage:1,
            isActive:0,
        },
        watch:{
            size:function () {
                $.ajax({
                    url: '/demo/course/getByArray',
                    type: 'POST',
                    data: {'currentPage': 1, 'size': this.size},
                    // dataType:'json',
                    success: function (result) {
                        app.courseMList = result;
                        $.ajax({
                            url:'/demo/course/getNumber',
                            type:'POST',
                            data:{},
                            // dataType:'json',
                            success:function(result){
                                app.currentPage = Math.ceil(result/app.size);
                                console.log(app.currentPage);
                            }
                        });
                    }
                });
            }
        },
        methods: {
            //   鼠标移入
            mouseEnter(index){
                this.isActive = index;
            },
            //   鼠标移除
            mouseLeave(){
                this.isActive=null;
            },
            previous:function(){
                if(this.nowPage !== 1) {
                    this.nowPage = this.nowPage - 1;
                    $.ajax({
                        url: '/demo/course/getByArray',
                        type: 'POST',
                        data: {'currentPage': this.nowPage, 'size': this.size},
                        // dataType:'json',
                        success: function (result) {
                            app.courseMList = result;
                        }
                    });
                }
            },
            nextPage:function(){
                if(this.nowPage !== this.currentPage) {
                    this.nowPage = this.nowPage + 1;
                    $.ajax({
                        url: '/demo/course/getByArray',
                        type: 'POST',
                        data: {'currentPage': this.nowPage, 'size': this.size},
                        // dataType:'json',
                        success: function (result) {
                            app.courseMList = result;
                        }
                    });
                }
            },
            array:function(i){
                this.nowPage = i;
                $.ajax({
                    url:'/demo/course/getByArray',
                    type:'POST',
                    data:{'currentPage':this.nowPage,'size':this.size},
                    // dataType:'json',
                    success:function(result){
                        app.courseMList = result;
                        $.ajax({
                            url:'/demo/course/getNumber',
                            type:'POST',
                            data:{},
                            // dataType:'json',
                            success:function(result){
                                app.currentPage = Math.ceil(result/app.size);
                            }
                        });

                    }
                });
            },
            show1:function(){
                this.shows=1;
            },
            show2:function(){
                this.shows=2;
            },
            show3:function(){
                this.shows=3;
            },
            show4:function(){
                this.shows=4;
            },
            show5:function(){
                this.shows=5;
            },
            show6:function(){
                this.shows=6;
            },
            show7:function(){
                this.shows=7;
            },
            show8:function(){
                this.shows=8;
            },
            getCourseM: function(){
                $.ajax({
                    url:'/demo/course/get',
                    type:'GET',
                    data:{name:this.name},
                    dataType:'json',
                    success:function(listCourse){
                        app.courseMList = listCourse;
                        $.ajax({
                            url:'/demo/course/getNumber',
                            type:'POST',
                            data:{},
                            // dataType:'json',
                            success:function(result){
                                app.currentPage = Math.ceil(result/app.size);
                            }
                        });
                    }
                });
            },

            keyup: function (x, i) {
                if (x < 0) {
                    alert("输入框不能为负数！！！")
                    this.courseMList[i].num = 0;
                }
            },
            deleteOne: function () {
                this.courseMList.splice(checkDel, 1);

            },
            deletechoose: function () {
                for (var i = 0; i < app.courseMList.length; i++) {
                    if (this.courseMList[i].show) {
                        console.log("stuScore["+i+"].show="+this.courseMList[i].show);
                        $.ajax({
                            url:'/demo/course/delete',
                            type:'POST',
                            data:{"id": app.courseMList[i].id},
                            // dataType:'json',
                            success:function(result){
                                app.courseMList.splice(i, 1);
                                i=i-1;
                            }
                        });
                    }
                }
                $.ajax({
                    url: '/demo/course/getByArray',
                    type: 'POST',
                    data: {'currentPage': 1, 'size': this.size},
                    // dataType:'json',
                    success: function (result) {
                        app.courseMList = result;
                        $.ajax({
                            url:'/demo/stuInfo/getNumber',
                            type:'POST',
                            data:{},
                            // dataType:'json',
                            success:function(result){
                                app.currentPage = Math.ceil(result/app.size);
                                console.log(app.currentPage);
                            }
                        });
                    }
                });
                location.reload();
            },
            selectall: function () {
                if (this.showall === true) {
                    for (var i = 0; i < this.courseMList.length; i++) {
                        this.courseMList[i].show = false;
                    }
                }
                if (this.showall === false) {
                    for (var i = 0; i < this.courseMList.length; i++) {
                        this.courseMList[i].show = true;
                    }
                }
            },
            changeCheck: function (i) {

                checkDel = i;

            },
            selectanywhere: function (index) {
                if (this.courseMList[index].show === true)
                    this.courseMList[index].show = false;
                else {
                    this.courseMList[index].show = true;
                }
            },
            listen: function (index) {
                if (this.courseMList[index].show == true) {
                    this.courseMList[index].show = false;
                } else {
                    this.courseMList[index].show = true;
                }
                var mark = 9;
                for (var i = 0; i < this.courseMList.length; i++) {
                    if (this.courseMList[i].show == true) {
                        mark++;
                    } else {
                        mark--;
                    }
                }
                if (mark == 18) {
                    this.showall = true;
                } else {
                    this.showall = false;
                }
            }
        },
        compulated: {}
    });

    $(function () {
        app.getCourseM();
    })
</script>
</body>

</html>